<template>
  <!-- 我的音乐页面 -->
  <div class="my-music">
    <!-- 最上面的红线 -->
    <div class="top"></div>
    <div class="wrap">
      <!-- 左侧 -->
      <div class="left">
        <div class="left-title">我的歌手<span>（1）</span></div>
        <!-- 创建的歌单 -->
        <div class="create-playlist">
          <div class="create-info" @click="createPlaylist = !createPlaylist">
            <!-- 三角形 -->
            <i class="triangle-1" v-if="!createPlaylist"></i>
            <i class="triangle-2" v-if="createPlaylist"></i>
            <p class="p">
              创建的歌单<span class="icon"></span><span>（12）</span>
            </p>
          </div>
          <!-- 新建歌单 -->
          <div class="btn">
            <i>新建</i>
          </div>
          <!-- 下方歌单 -->
          <ul class="playlist" v-if="createPlaylist">
            <li v-for="i,index in 10" :key="index">
              <div class="img">
                <img src="./img/1.jpg" />
              </div>
              <div class="info">
                <p>我喜欢的音乐</p>
                <p>101首</p>
              </div>
            </li>
          </ul>
        </div>
        <!-- 收藏的歌单 -->
        <div class="save-playlist">
          <div class="save-info" @click="savePlaylist = !savePlaylist">
            <!-- 三角形 -->
            <i class="triangle-1" v-if="!savePlaylist"></i>
            <i class="triangle-2" v-if="savePlaylist"></i>
            <p class="p">
              创建的歌单<span class="icon"></span><span>（10）</span>
            </p>
          </div>
          <!-- 下方歌单 -->
          <ul class="playlist" v-if="savePlaylist">
            <li v-for="i,index in 4" :key="index">
              <div class="img">
                <img src="./img/1.jpg" />
              </div>
              <div class="info">
                <p>我喜欢的音乐</p>
                <p>101首</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <!-- 头部 -->
        <right-title></right-title>
        <!-- 歌曲列表 -->
        <right-sings></right-sings>
      </div>
    </div>
  </div>
</template>

<script>
// 右侧头部
import rightTitle from '@/components/my-music-components/right-title'
// 右侧歌曲列表
import rightSings from '@/components/my-music-components/right-sings'
export default {
  name: "my-music",
  components:{rightTitle,rightSings},
  data(){
    return{
      // 控制创建的歌单显示与隐藏
      createPlaylist:false,
      // 控制收藏的歌单显示与隐藏
      savePlaylist:false
    }
  }
};
</script>

<style lang="scss" scoped>
.my-music {
  width: 100%;
  font-size: 12px;
  background-color: #f5f5f5;
  .top {
    width: 100%;
    height: 5px;
    background-color: #c00c0c;
  }
  .wrap {
    width: 982px;
    background-color: #fff;
    margin: 0 auto;
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
    display: flex;
    // .left:hover ::-webkit-slider-thumb{
    //   background-color: red;
    // }
    .left {
      width: 240px;
      background-color: #f9f9f9;
      font-size: 14px;
      position: relative;
      // 超出部分滚动
      overflow: scroll;
      // 清除横向滚动条
      overflow-x: hidden;

      &:hover ::-webkit-scrollbar-thumb{
        background-color: red;
      }
      // 滚动条大小
      &::-webkit-scrollbar{
        width:8px;
        height:8px;
      }
      // &::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb{
      //   background-color: #adadad;
      //   box-shadow: inset 1px 1px 3px rgba(0,0,0,.4);
      // }
      // 滚动轨道
      &::-webkit-scrollbar-track{
        background-color: #f9f9f9;
        border-radius:10px;
      }
      &::-webkit-scrollbar-track:hover{
        background-color: #e4e4e4;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,.1);
      }
      // 轨道hover时，滑块也hover ********** 不生效
      .left::-webkit-scrollbar-track:hover + &::-webkit-scrollbar-thumb{
        background-color: red;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,.4);
      }
      // 滚动滑块
      &::-webkit-scrollbar-thumb{
        background-color: #ececec;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,.1);
        border-radius:10px;
      }
      &::-webkit-scrollbar-thumb:hover{
        background-color: #adadad;
        box-shadow: inset 1px 1px 3px rgba(0,0,0,.4);
      }
      // 滑块hover时，轨道也需要hover
      // &::-webkit-scrollbar-thumb:hover ::-webkit-scrollbar-track{
      //   background-color: #adadad;
      //   box-shadow: inset 1px 1px 3px rgba(0,0,0,.4);
      // }
      .left-title {
        margin-top: 40px;
        cursor: pointer;
        width: 200px;
        line-height: 36px;
        padding: 0 5px 0 35px;
        font-weight: bold;
        position: relative;
        &:hover {
          background-color: #eee;
        }
      }
      .create-playlist {
        .btn {
          position: absolute;
          cursor: pointer;
          top: 83px;
          right: 10px;
          width: 52px;
          height: 22px;
          line-height: 22px;
          font-size: 12px;
          background: url("@/assets/button.png") no-repeat;
          background-position: 0 -96px;
          &:hover {
            background-position: -94px -39px;
          }
          i {
            padding-left: 22px;
            font-weight: normal;
          }
        }
        .create-info {
          width: 200px;
          line-height: 36px;
          padding: 0 5px 0 35px;
          font-weight: bold;
          position: relative;
          .icon {
            display: inline-block;
            vertical-align: text-top;
            width: 8px;
            height: 8px;
            background: url("@/assets/black-r-icon@3x.png") no-repeat;
            background-size: cover;
          }
          .triangle-1 {
            display: inline-block;
            border: 8px solid #ccc;
            border-color: transparent transparent transparent #ccc;
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translate(0, -50%);
          }
          .triangle-2{
            display: inline-block;
            border: 8px solid #ccc;
            border-color: #ccc transparent transparent transparent;
            position: absolute;
            left: 12px;
            top: 15px;
          }
          .triangle-1,
          .triangle-2,
          p {
            cursor: pointer;
          }
          .p {
            width: 128px;
          }
          
        }
      }
      .save-playlist{
        .save-info {
          width: 200px;
          line-height: 36px;
          padding: 0 5px 0 35px;
          font-weight: bold;
          position: relative;
          .icon {
            display: inline-block;
            vertical-align: text-top;
            width: 8px;
            height: 8px;
            background: url("@/assets/black-r-icon@3x.png") no-repeat;
            background-size: cover;
          }
          .triangle-1 {
            display: inline-block;
            border: 8px solid #ccc;
            border-color: transparent transparent transparent #ccc;
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translate(0, -50%);
          }
          .triangle-2{
            display: inline-block;
            border: 8px solid #ccc;
            border-color: #ccc transparent transparent transparent;
            position: absolute;
            left: 12px;
            top: 15px;
          }
          .triangle-1,
          .triangle-2,
          p {
            cursor: pointer;
          }
          .p {
            width: 128px;
          }
          .btn {
            position: absolute;
            cursor: pointer;
            top: 10px;
            right: 10px;
            width: 52px;
            height: 22px;
            line-height: 22px;
            font-size: 12px;
            background: url("@/assets/button.png") no-repeat;
            background-position: 0 -96px;
            &:hover {
              background-position: -94px -39px;
            }
            i {
              padding-left: 22px;
              font-weight: normal;
            }
          }
        }
      }
      .playlist {
        width: 240px;
        font-size: 12px;
        li {
          width: 212px;
          height: 42px;
          padding: 6px 0 6px 20px;
          display: flex;
          cursor: pointer;
          &:hover{
            background-color: #e6e6e6;
          }
          .img {
            width: 40px;
            height: 40px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .info {
            width: 160px;
            margin-left: 10px;
            p {
              line-height: 20px;
            }
            p:nth-child(2) {
              color: #999;
            }
          }
        }
      }
    }
    .right {
      width: 739px;
      border-left: 1px solid #d3d3d3;
    }
  }
}
</style>